<template>
  <div id="login">
    <div class="header">
      <div class="normBroad">
        <img :src="$globalImageUrl + collegesPicture.logo" alt="" @click="jumpTo('/home')">
        <h2 @click="jumpTo('/home')">创意实训平台</h2>
        <p><span>登录</span> | <span @click="jumpTo('/register')">注册</span></p>
      </div>
    </div>
    <div class="loginContent">
      <img class="loginBackImg" src="../../assets/img/login/login_back.png" alt="">
      <div class="loginPanelBox">
        <div class="loginPanel">
          <div class="loginBadge" @click="onBadgeMethod()">
            <img src="../../assets/img/login/icon_badge.png" alt="">
            <span>{{loginMethodText}}</span>
          </div>
          <h2>{{loginTitleText}}登录</h2>
          <ul>
            <li>
              <label for="loginMobile">
                <input id="loginMobile" type="text" :placeholder="'请输入您的' + loginTitleText" v-model="accountMobile">
              </label>
            </li>
            <li>
              <label for="loginPassword">
                <input id="loginPassword" type="password" placeholder="请输入您的密码" v-model="password">
              </label>
            </li>
            <li>
              <label for="loginSeclet" @click="onShowSeclet()">
                <input id="loginSeclet" type="text" disabled v-model="identity">
                <img src="../../assets/img/login/icon_right.png" alt="">
              </label>
              <div class="loginOption" v-show="secletListFlag">
                <ul>
                  <li v-for="(item, index) in optionList" :key="index" @click="onSecletOption(item)">{{item}}</li>
                </ul>
              </div>
            </li>
          </ul>
          <div class="loginText" style="margin-bottom: .2rem;">
            <p><span @click="jumpTo('/forget')">忘记密码？</span></p>
          </div>
          <div class="btnBox" style="margin-bottom: .2rem;">
            <button class="btnDef" @click="handLogin()">登录</button>
          </div>
          <div class="loginText" style="text-align: right;">
            <p>您还没有账号，<span @click="jumpTo('/register')">去注册。</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      loginMethod: 0, // 1 手机登录 0 账号登录
      secletListFlag: false,
      identity: '普通用户',
      optionList: ['普通用户', '学生', '设计师', '企业', '园区'],
      globalMonitorFlag: true, // 是否调用全局函数
      accountMobile: '',
      password: '',
      userType: 0, // 用户类型
      collegesPicture: {}
    }
  },
  computed: {
    // 切换登录状态text
    loginMethodText () {
      let text = '账号登录'
      if (this.loginMethod === 1) {
        text = '账号登录'
      } else if (this.loginMethod === 0) {
        text = '手机登录'
      }
      return text
    },
    loginTitleText () {
      let text = '手机号'
      if (this.loginMethod === 1) {
        text = '手机号'
      } else if (this.loginMethod === 0) {
        text = '账号'
      }
      return text
    }
  },
  created () {
    window.localStorage.clear()
    this.fetchSchoolLogo()
  },
  methods: {
    // 获取高校图片
    fetchSchoolLogo () {
      this.$api.getSchoolLogo({
      }).then(res => {
        this.collegesPicture = res.data
      })
    },
    onBadgeMethod () {
      if (this.loginMethod === 1) {
        this.loginMethod = 0
      } else if (this.loginMethod === 0) {
        this.loginMethod = 1
      } else {
        this.loginMethod = 1
      }
    },
    onShowSeclet () {
      this.globalMonitorFlag = true
      this.globalClick(() => {
        if (this.globalMonitorFlag === true) {
          this.globalMonitorFlag = false
          this.secletListFlag = !this.secletListFlag
        } else {
          this.secletListFlag = false
        }
      })
    },
    onSecletOption (item) {
      this.globalMonitorFlag = false
      this.identity = item
      this.secletListFlag = false
      if (item === '普通用户') {
        this.userType = 0
      } else if (item === '学生') {
        this.userType = 1
      } else if (item === '设计师') {
        this.userType = 2
      } else if (item === '企业') {
        this.userType = 3
      } else if (item === '园区') {
        this.userType = 4
      }
    },
    // 登录
    handLogin () {
      if (this.accountMobile === '') {
        this.$vux.toast.text('请输入账号或手机号')
        return
      }
      // if (!this.checkMobile(this.accountMobile)) {
      //   this.$vux.toast.text('请输入正取手机号')
      //   return
      // }
      if (this.password === '') {
        this.$vux.toast.text('请输入密码')
        return
      }
      this.$api.getLogin({
        loginName: this.accountMobile,
        password: this.password,
        userType: this.userType,
        type: this.loginMethod
      }).then(res => {
        if (res.code === 0) {
          this.$store.commit('setUserId', res.data.userId)
          this.$store.commit('setUserInfo', res.data.userInfo)
          this.$store.commit('setUserRank', this.userType)
          this.$store.commit('setUserStatus', false)
          this.jumpTo('/home')
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/less/variable.less';

#login {
  .normBroad{
    width: 1200px;
    margin: auto;
  }
  .header{
    background: #fff;
    .normBroad{
      font-size: 0;
      img{
        width: 3rem;
        height: .6rem;
        display: inline-block;
        background-color: #ccc;
        margin: .2rem 0;
      }
      h2{
        color: #15a29c;
        font-size: .16rem;
        font-weight: 500;
        display: inline-block;
        vertical-align: middle;
        margin-left: .2rem;
      }
      p{
        color: #333;
        font-size: .16rem;
        font-weight: 500;
        float: right;
        line-height: 1rem;
        span{
          color: #333;
          font-size: .16rem;
          font-weight: 500;
        }
      }
    }
  }
  .loginContent{
    width: 100%;
    position: relative;
    img.loginBackImg{
      width: 100%;
      display: inline-block;
    }
    .loginPanelBox{
      position: absolute;
      left: 70%;
      top: 45%;
      transform: translate(-50%, -50%);
      .loginPanel{
        position: absolute;
        left: 50%;
        bottom: 50%;
        transform: translate(-50%, 50%);
        width: 3.5rem;
        background-color: #fff;
        padding: .2rem;
        border-radius: .1rem;
        .loginBadge{
          position: absolute;
          width: 1rem;
          right: 1px;
          top: 1px;
          border-radius: 0 .1rem 0 0;
          overflow: hidden;
          img{
            width: 100%;
            background: rgba(0,0,0,0);
          }
          span{
            font-size: .14rem;
            color: #fff;
            line-height: .22rem;
            font-weight: 500;
            width: .56rem;
            position: absolute;
            left: 55%;
            top: 45%;
            transform: rotate(45deg) translateX(-50%);
          }
        }
        h2{
          font-size: 0.24rem;
          font-weight: bold;
          color: rgba(17, 17, 17, 1);
          line-height: .32rem;
          text-align: center;
          margin-top: .1rem;
          margin-bottom: .3rem;
        }
        ul{
          li{
            width: 100%;
            margin-bottom: .15rem;
            font-size: 0;
            position: relative;
            label{
              display: inline-block;
              width: 100%;
              border: 1px solid #eee;
              border-radius: 500px;
              padding: 0 .2rem;
              line-height: .4rem;
              height: .4rem;
              position: relative;
              input{
                display: inline-block;
                width: 100%;
                height: 100%;
                font-size: .14rem;
                font-weight: 500;
                color: #333;
                line-height: .24rem;
              }
              input:disabled {
                background-color: #fff;
              }
              img{
                width: 0.1rem;
                height: 0.18rem;
                position: absolute;
                right: 15px;
                bottom: 10px;
                transform: scale(.6) rotate(90deg);
                background-color: #fff;
              }
            }
            .loginOption{
              position: absolute;
              left: 0;
              top: .4rem;
              width: 100%;
              ul{
                border: 1px solid #eee;
                border-radius: .1rem;
                background: #fff;
                overflow: hidden;
                li{
                  margin: auto;
                  font-size: .14rem;
                  color: #333;
                  padding: 0 .2rem;
                  line-height: .4rem;
                }
                li:hover {
                  background-color: #eee;
                }
              }
            }
            span{
              display: inline-block;
              width: 35%;
              border: 1px solid #eee;
              border-radius: 500px;
              padding: 0 .15rem;
              line-height: .4rem;
              font-size: .14rem;
              font-weight: 500;
              vertical-align: top;
              background-color: #15a29c;
              color: #fff;
              text-align: center;
              float: right;
            }
          }
        }
        .loginText{
          p{
            font-size: 0.12rem;
            font-weight: 500;
            color: #333;
            line-height: 0.2rem;
            span{
              font-size: 0.12rem;
              font-weight: 500;
              color: #15a29c;
              line-height: 0.2rem;
            }
          }
        }
        .btnBox{
          display: flex;
          justify-content: space-between;
          flex-wrap: nowrap;
          button.btnDef{
            border: none;
            width: 100%;
            text-align: center;
            border-radius: 500px;
            line-height: .4rem;
            background-color: #15a29c;
            color: #fff;
            font-size: .16rem;
            font-weight: bold;
            outline: none;
          }
        }
      }
    }
  }
}
</style>
